import {
	defineComponent,
  h,
	KeepAlive
} from "vue";
import "../../directives/style/resize.css";
import styles from "./verticalTabMenu.module.scss";

export default{
  name: "VerticalTabMenu",
  props: {
    active: {
      type: String,
      default: undefined
    },
    collapsible: {
      type: Boolean,
      default: true
    },
    autoCollapse: {
      type: Boolean,
      default: false
    },
    resizeable: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: undefined
    },
    minWidth: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: undefined
    },
    minHeight: {
      type: Number,
      default: 0
    },
    position: {
      type: String,
      default: "left",
      validator: value => {
        return ["left", "right", "bottom"].includes(value);
      }
    }
  },
  data() {
    return {
      tabs: [],
      collapsed: false
    };
  },
  watch: {
    active: function(v) {
      this.switchTab(v);
    }
  },
  methods: {
    switchTab: function(name) {
      if (name) {
        const hasTab = this.tabs.find(item => item.name === name);
        if (hasTab) {
          this.$emit("update:active", name);
          this.collapsed = false;
        }
      } else {
        this.$emit("update:active");
      }
    },
    handleTabClick: function(tab) {
      
      const { name } = tab.props;
      if (name === this.active) {
        if (this.collapsible) {
          this.switchTab();
          this.collapsed = !this.collapsed;
        }
      } else {
        this.switchTab(tab.props.name);
      }
    },
    renderTabs: function(tabs = []) {
      const {
        active,
        collapsible,
        collapsed,
        resizeable,
        autoCollapse,
        width,
        height,
        minWidth,
        minHeight,
        position
      } = this;
      const tab = tabs.find(item => {
        return item.props.name === active;
      });
      const resizeHandler = position => {
        if (position === "left") return "r";
        if (position === "right") return "l";
        if (position === "bottom") return "t";
      };
      const resizeOption = {
        resizeable,
        minWidth,
        minHeight,
        handler: [resizeHandler(position)],
        onReachMinWidth: () => {
          this.$emit("reach-min-width");
          if (collapsible && autoCollapse) {
            this.collapsed = true;
            this.switchTab();
          }
        },
        onReachMinHeight: () => {
          this.$emit("reach-min-height");
          if (collapsible && autoCollapse) {
            this.collapsed = true;
            this.switchTab();
          }
        }
      };
      const containerStyle = position => {
        if (position === "left" || position === "right") {
          return {
            minWidth: `${minWidth}px`,
            width: width ? `${width}px` : "auto"
          };
        }
        if (position === "top" || position === "bottom") {
          return {
            minHeight: `${minHeight}px`,
            height: height ? `${height}px` : "auto"
          };
        }
        return {};
      };
      const style = containerStyle(position);

      return h("div",{class:[styles.verticalTabMenuWrap, styles[position], { collapsed, opened: active && !collapsed }]},
      h("ul",{class:styles.verticalTabMenuList},tabs.map(item => {
        return (
          h("li",{class:[
            styles.verticalTabMenuListItem,
            {
              [styles.active]: !collapsed && active === item.props.name,
              [styles.disabled]: item.props.disabled
            }
          ],key:item.props.name,onClick:() => this.handleTabClick(item)},item.props.label)
        );
      })),
      h("div",{class:[styles.verticalTabContainer, { [styles.hidden]: !active || collapsed }],style:{style}, 'v-resize':resizeOption},
      h('KeepAlive',{},tab)))
    
      // return (
      //   <div class={[styles.verticalTabMenuWrap, styles[position], { collapsed, opened: active && !collapsed }]}>
      //     <ul class={styles.verticalTabMenuList}>
      //       {tabs.map(item => {
      //         return (
      //           <li
      //             class={[
      //               styles.verticalTabMenuListItem,
      //               {
      //                 [styles.active]: !collapsed && active === item.props.name,
      //                 [styles.disabled]: item.props.disabled
      //               }
      //             ]}
      //             key={item.props.name}
      //             onClick={() => this.handleTabClick(item)}
      //           >
      //             {item.props.label}
      //           </li>
      //         );
      //       })}
      //     </ul>
      //     <div
      //       class={[styles.verticalTabContainer, { [styles.hidden]: !active || collapsed }]}
      //       style={style}
      //       v-resize={resizeOption}
      //     >
      //       <KeepAlive>{tab}</KeepAlive>
      //     </div>
      //   </div>
      // );
    }
  },
 render() {


    if (this.$slots && this.$slots.default) {
      const children = this.$slots.default();
      const panels = [],
        tabs = [];
      children.forEach(item => {
        if (item.type.name === "VerticalTabMenuPanel") {
          const key = item.key || item.props.name;
          item.key = key;
          item.props.key = key;
          panels.push(item);
          tabs.push({
            name: item.props.name,
            label: item.props.label,
            key
          });
        }
      });
      this.tabs = tabs;
      return this.renderTabs(panels);
    } else {
      return this.renderTabs();
    }
  }
}